<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>{$Think.config.site.title} - 主页</title>
    <meta name="keywords" content="{$Think.config.site.keywords}">
    <meta name="description" content="{$Think.config.site.description}">
    <link href="{$Think.config.site.resource_url}css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/animate.css" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/style.css?v=4.1.0" rel="stylesheet">
</head>
<style type="text/css">
    .row1{ margin-top: 135px; }
</style>
<style>.layer-date{ width: 240px; padding:0px 12px; position: relative; top:-9px;}</style>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">
            <p id="buttons">
                　{:lang('请选择要查询的日期')}　
                <button type="button" {if condition="$time eq 'thismonth'"} class="btn btn-primary" {else /}  class="btn btn-outline btn-primary"  {/if} data-id="thismonth">{:lang('本月')}</button>　
                <button type="button" {if condition="$time eq 'thisweek'"} class="btn btn-primary" {else /}  class="btn btn-outline btn-primary"  {/if} data-id="thisweek">{:lang('本周')}</button>　
                <button type="button" {if condition="$time eq 'today'"} class="btn btn-primary" {else /}  class="btn btn-outline btn-primary"  {/if} data-id="today">{:lang('今天')}</button>　
                <button type="button" {if condition="$time eq 'yesterday'"} class="btn btn-primary" {else /}  class="btn btn-outline btn-primary"  {/if} data-id="yesterday">{:lang('昨天')}</button>　
                <button type="button" {if condition="$time eq 'lastmonth'"} class="btn btn-primary" {else /}  class="btn btn-outline btn-primary"  {/if} data-id="lastmonth">{:lang('上月')}</button>　
                <button type="button" {if condition="$time eq 'thisyear'"} class="btn btn-primary" {else /}  class="btn btn-outline btn-primary"  {/if} data-id="thisyear">{:lang('今年')}</button>　
                <button type="button" {if condition="$time eq 'lastyear'"} class="btn btn-primary" {else /}  class="btn btn-outline btn-primary"  {/if} data-id="lastyear">{:lang('去年')}</button>
            <form action="" id="myForm" method="post">
                <input type="hidden" value="" id="time" name="time">
            </form>
            </p>
            <p>&nbsp;</p>
            <form method="post" action="" id="custom" style="margin-top:10px;" >
                　　<input class="form-control layer-date" name="starttime" id="kaishi" value="{$kaishitime ?? ''}" placeholder="{:lang('开始时间')}" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">　<input class="form-control layer-date" value="{$jieshutime ?? ''}" name="endtime" id="jieshu" autocomplete="off" placeholder="{:lang('结束时间')}" autocomplete="off" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">　<button type="button" class="btn btn-outline btn-primary" id="search" >{:lang('提交')}</button>
            </form>
        </div>
        <!-- 充值统计 -->
        <div class="row">
            <div id="graphic" class="col-md-12">
                <div id="rechargeorder" class="main"></div>
                <div>
                    <div class="flot-chart">
                        <div class="flot-chart-content"  style=" height:350px; " id="order" ></div>
                    </div>
                </div>
            </div>
        </div>
        <br/>
        <hr>
        <!-- 租还统计 -->
        <div class="row row1" >
            <div class="col-md-12">
                <div id="leaseorder" class="main"></div>
                <div>
                    <div class="flot-chart">
                        <div class="flot-chart-content"  style=" height:350px;" id="leaseorders"></div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <!-- 充值押金统计 -->
        <div class="row row1">
            <div class="col-md-12">
                <div id="depositRecharge" class="main"></div>
                <div>
                    <div class="flot-chart">
                        <div class="flot-chart-content"  style=" height:350px;" id="deposit"></div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <!-- 押金退还统计 -->
        <div class="row row1">
            <div class="col-md-12">
                <div id="refunds" class="main"></div>
                <div>
                    <div class="flot-chart">
                        <div class="flot-chart-content"  style=" height:350px;" id="refund"></div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <!-- 新增用户统计 -->
        <div class="row row1">
            <div class="col-md-12">
                <div id="user" class="main"></div>
                <div>
                    <div class="flot-chart">
                        <div class="flot-chart-content"  style=" height:350px;" id="users" ></div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <!-- 商家统计 -->
        <div class="row row1">
            <div class="col-md-12">
                <div id="seller" class="main"></div>
                <div>
                    <div class="flot-chart">
                        <div class="flot-chart-content"  style=" height:350px;" id="sellers" ></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 全局js -->
<script src="{$Think.config.site.resource_url}js/jquery.min.js?v=2.1.4"></script>

<script type="text/javascript">
    $(function(){
        $("#buttons button").click(function(){
            $("#buttons button").removeClass('btn btn-primary');
            $("#buttons button").addClass('btn btn-outline btn-primary');
            $(this).addClass('btn btn-primary');
            var time = $(this).data("id");
            //alert(a);
            $('#time').val(time);
            $('#myForm').submit();
        });
        $('#search').click(function(){
            var strat = $('#kaishi').val();
            var end = $('#jieshu').val();
            if(strat==''){
                $('#kaishi').attr('placeholder',"{:lang('请选择开始时间')}");
                $('#kaishi').focus();
                return false;
            }else if(end==''){
                $('#jieshu').attr('placeholder',"{:lang('请选择结束时间')}");
                $('#jieshu').focus();
                return false;
            }

            $('#custom').submit();

        });

    });
</script>
<script src="{$Think.config.site.resource_url}js/bootstrap.min.js?v=3.3.6"></script>
<!-- ECharts -->
<script src="{$Think.config.site.resource_url}js/plugins/echarts/echarts-all.js"></script>
<!-- 自定义js -->
<script src="{$Think.config.site.resource_url}js/content.js?v=1.0.0"></script>
<!-- ECharts demo data -->
<script src="{$Think.config.site.resource_url}js/demo/echarts-demo.js"></script>
<script type="text/javascript">
    var  rechargeorder = echarts.init(document.getElementById('order'));
    var leaseorders = echarts.init(document.getElementById('leaseorders'));
    var refund = echarts.init(document.getElementById('refund'));
    var sellers = echarts.init(document.getElementById('sellers'));
    var deposit = echarts.init(document.getElementById('deposit'));
    var user = echarts.init(document.getElementById('users'));
    //充值记录
    <?php
    if($time=='thismonth'){
        $title = "{:lang('本月')}";
    }else if($time=='thisweek'){
        $title = "{:lang('本周')}";
    }else if($time=='thisyear'){
        $title = "{:lang('今年')}";
    }else if($time=='today'){
        $title = "{:lang('今天')}";
    }else if($time=='yesterday'){
        $title = "{:lang('昨天')}";
    }else if($time=='lastyear'){
        $title = "{:lang('去年')}";
    }else if($time=='lastmonth'){
        $title = "{:lang('上月')}";
    }else{
        $title = $time;
    }
        ?>
    option = {
        noDataLoadingOption: {
            text: "{:lang('暂无数据')}",
            effect: 'bubble',
            effectOption: {
                effect: {
                    n: 0
                }
            }
        },
        title : {
            text: "　　{$title}{:lang('充值金额')}",
            subtext: ''
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:["{$title}{:lang('充值金额，总金额：')}{$data.sumrecharge}"]
        },
        toolbox: {
            show : true,
            feature : {
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : [{volist name="data.Recharge" id="v"}'{$v.unit} {$unit}', {/volist}]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:"{:lang('充值金额')}",
                type:'line',
                smooth:true,
                itemStyle: {normal: {areaStyle: {type: 'default',color:'#7FFFD4'}}},
                data:[{volist name="data.Recharge" id="v"}'{$v.amount} ', {/volist}]
            }

        ]
    };
    //租金金额
    option2 = {
        noDataLoadingOption: {
            text: "{:lang('暂无数据')}",
            effect: 'bubble',
            effectOption: {
                effect: {
                    n: 0
                }
            }
        },
        title : {
            text: "　　{$title}{:lang('租金金额')}",
            subtext: ''
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:["{$title}{:lang('租金额,总租金额：')}{$data.sumleaseorder}"]
        },
        toolbox: {
            show : true,
            feature : {
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : [{volist name="data.leaseorder" id="v"}'{$v.unit} {$unit}', {/volist}]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'租金额',
                type:'line',
                smooth:true,
                itemStyle: {normal: {areaStyle: {type: 'default',color:'#4EEE94'}}},
                data:[{volist name="data.leaseorder" id="v"}'{$v.amount} ', {/volist}]
            }

        ]
    };
    //客户退押金
    option3 = {
        noDataLoadingOption: {
            text: "{:lang('暂无数据')}",
            effect: 'bubble',
            effectOption: {
                effect: {
                    n: 0
                }
            }
        },
        title : {
            text: "　　{$title}{:lang('客户退押金')}",
            subtext: ''
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:["{$title}{:lang('客户退押金，总退押金金额：')}{$data.sumrefund}"]
        },
        toolbox: {
            show : true,
            feature : {
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : [{volist name="data.refund" id="v"}'{$v.unit} {$unit}', {/volist}]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:"{:lang('客户退押金')}",
                type:'line',
                smooth:true,
                itemStyle: {normal: {areaStyle: {type: 'default',color:'#3CB371'}}},
                data:[{volist name="data.refund" id="v"}'{$v.amount} ', {/volist}]
            }

        ]
    };
    //客户充值押金数
    option4 = {
        noDataLoadingOption: {
            text: "{:lang('暂无数据')}",
            effect: 'bubble',
            effectOption: {
                effect: {
                    n: 0
                }
            }
        },
        title : {
            text: "　　{$title}{:lang('客户充值押金')}",
            subtext: ''
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:["{$title}{:lang('客户充值押金,总充值押金金额：')}{$data.sumdepositRecharge}"]
        },
        toolbox: {
            show : true,
            feature : {
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : [{volist name="data.depositRecharge" id="v"}'{$v.unit} {$unit}', {/volist}]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:"{:lang('客户充值押金')}",
                type:'line',
                smooth:true,
                itemStyle: {normal: {areaStyle: {type: 'default',color:'#90EE90'}}},
                data:[{volist name="data.depositRecharge" id="v"}'{$v.deposit} ', {/volist}]
            }

        ]
    };
    //
    //新增用户统计
    option6 = {
        noDataLoadingOption: {
            text: "{:lang('暂无数据')}",
            effect: 'bubble',
            effectOption: {
                effect: {
                    n: 0
                }
            }
        },
        title : {
            text: "　　{$title}{:lang('新增客户')}",
            subtext: ''
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:["{$title}{:lang('新增客户，总客户数：')}{$data.countuser}"]
        },
        toolbox: {
            show : true,
            feature : {
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : [{volist name="data.user" id="v"}'{$v.unit} {$unit}', {/volist}]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:"{:lang('新增客户')}",
                type:'line',
                smooth:true,
                itemStyle: {normal: {areaStyle: {type: 'default',color:'#4EEE94'}}},
                data:[{volist name="data.user" id="v"}'{$v.count} ', {/volist}]
            }

        ]
    };
    //商户交易统计
    option7 = {
        noDataLoadingOption: {
            text: "{:lang('暂无数据')}",
            effect: 'bubble',
            effectOption: {
                effect: {
                    n: 0
                }
            }
        },
        title : {
            text: "　　{$title}{:lang('商户交易')}",
            subtext: ''
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:["{$title}{:lang('商户交易，总营交易额：')}{$data.sumsellers}"]
        },
        toolbox: {
            show : true,
            feature : {
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : [{volist name="data.sellers" id="v"}'{$v.name}', {/volist}]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:"{:lang('商户交易')}",
                type:'line',
                smooth:true,
                itemStyle: {normal: {areaStyle: {type: 'default',color:'#7FFFD4'}}},
                data:[{volist name="data.sellers" id="v"}'{$v.amount} ', {/volist}]
            }

        ]
    };


    rechargeorder.setOption(option);
    leaseorders.setOption(option2);
    refund.setOption(option3);
    deposit.setOption(option4);
    user.setOption(option6);
    sellers.setOption(option7);
</script>
<script src="{$Think.config.site.resource_url}js/plugins/layer/laydate/laydate.js"></script>
<script type="text/javascript">
    //外部js调用
    laydate({
        elem: '#hello',
        //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
        event: 'focus' //响应事件。如果没有传入event，则按照默认的click
    });

    //日期范围限制
    var start = {
        elem: '#start',
        format: 'YYYY/MM/DD hh:mm:ss',
        min: laydate.now(), //设定最小日期为当前日期
        max: '2099-06-16 23:59:59', //最大日期
        istime: true,
        istoday: false,
        choose: function (datas) {
            end.min = datas; //开始日选好后，重置结束日的最小日期
            end.start = datas //将结束日的初始值设定为开始日
        }
    };
    var end = {
        elem: '#end',
        format: 'YYYY/MM/DD hh:mm:ss',
        min: laydate.now(),
        max: '2099-06-16 23:59:59',
        istime: true,
        istoday: false,
        choose: function (datas) {
            start.max = datas; //结束日选好后，重置开始日的最大日期
        }
    };
    laydate(start);
    laydate(end);
</script>

</body>
</html>
